<script setup lang="ts">
import { MailOutlined, PieChartOutlined } from '@ant-design/icons-vue'

// api
import { toRefs } from 'vue'
import { useRouter } from 'vue-router'

const emits = defineEmits(['titleClick']);
const props = defineProps({
  menuItem: {
      type: Object as any,
      required: true, 
      default: () => ({}),
    }
});

    const { menuItem } = toRefs(props)
    const router = useRouter()
    const titleClick = (rowData: any) => {
      let { path, children } = rowData
      if (children?.length) {
        path = children[0].path
      }
      router.push({ path })
      emits('titleClick', rowData)
    }

</script>
<template>
  <a-sub-menu
      v-if="menuItem.children?.length"
    >
      <template #icon>
        <MailOutlined />
      </template>
      <template #title>{{ menuItem.name }}</template>
      <SubMenu v-for="item of menuItem.children" 
      :key="item.id"
      :menuItem="item" />
    </a-sub-menu>
    <a-menu-item v-else :key="menuItem.id" @click="titleClick(menuItem)">
      <template #icon>
        <PieChartOutlined />
      </template>
      {{ menuItem.name }}
    </a-menu-item>
</template>
<style scoped></style>
